<template>
  <div class="v-month-picker" ref="monthPickerObj">
    <div class="v-month-picker-header">
      <a href="javascript:;" v-if="showPrevNext" class="iconfont icon-arrow-right-line v-month-picker-header__prev" @click="prevOrNextMonthChange(-1)"></a>
      <span class="v-month-picker-header__label" @click="showDropList=!showDropList">
        <template v-if="monthValue.length>1 && !defaultTxt">
          {{monthValue[0]}}年 {{monthValue[1]}}月
        </template>
        <template>
          {{defaultTxt}}
        </template>
      </span>
      <a href="javascript:;" v-if="showPrevNext" class="iconfont icon-arrow-right-line v-month-picker-header__next" @click="prevOrNextMonthChange(1)"></a>
    </div>
    <div v-show="showDropList" class="v-month-picker-droplist" :style="{top:droplistTop+'px'}" @click="showDropList=false">
      <div class="v-month-picker-droplist-header" @click.stop="showDropList=true">
        <div class="v-month-picker-droplist-yearhandler">
          <a href="javascript:;" class="iconfont icon-arrow-right-line v-month-picker-header__prev" @click="yearChangeHandler(-1)"></a>
          {{selYear}}
          <a href="javascript:;" class="iconfont icon-arrow-right-line v-month-picker-header__next" @click="yearChangeHandler(1)"></a>
        </div>
      </div>
      <div class="v-month-picker-droplist-content" @click.stop="showDropList=true">
        <ul class="v-month-list">
          <li v-for="(item,index) in monthList" :key="index" 
          :class="[
            {active:monthValue.length && monthValue[0]===selYear && monthValue[1]===(index+1)},
            {disabled:!checkMonthEnable([selYear,index+1])}
          ]" 
          @click.stop="monthChangeHandler(item,index)">
            <span>{{item}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
/*
   功能模块  月选择器
   创建人    zgf
   更新时间  2019/12/24
   页面参数  
   备注      
*/
import DateUtil from './dateUtil.js'
export default {
  name: 'VMonthPicker',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    defaultTxt:{
      type:String,
      default:''
    },
    maxMonth: {
      type: Array,
      default() {
        return []
      }
    },
    maxMsg: {
      type: String,
      default: ''
    },
    showPrevNext:{
      type:Boolean,
      default:true
    },
    minMonth: {
      type: Array,
      default() {
        return []
      }
    },
    minMsg: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      droplistTop: 0,
      showDropList: false,
      selYear: 2019,
      monthList: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ],
      monthValue: []
    }
  },
  computed: {
    scroller() {
      return DateUtil.getScrollEventTarget(this.$el);
    }
  },
  watch: {
    value: {
      deep: true,
      handler(newVal) {
        this.monthValue = newVal
      }
    },
    monthValue: {
      deep: true,
      handler(newVal) {
        this.$emit('input', newVal)
      }
    },
    showDropList(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.updateOffsetTop()
        })
      this.scroller.addEventListener('scroll',this.onScroll)
      }else{
        this.scroller.removeEventListener('scroll',this.onScroll)
      }
    }
  },
  mounted() {
    this.setDefaultVal()
    document.addEventListener('click', e => {
      let ignNames = [
        'v-month-picker-header',
        'v-month-picker-header__label',
        'iconfont icon-arrow-right-line v-month-picker-header__next',
        'iconfont icon-arrow-right-line v-month-picker-header__prev'
      ]
      if (ignNames.indexOf(e.target.className) !== -1) {
        return false
      }
      this.showDropList = false
    })
  },
  methods: {
    //计算top值
    updateOffsetTop(){
      let rect = this.$refs.monthPickerObj.getBoundingClientRect()
      this.droplistTop = rect.y ? rect.y + rect.height : rect.top + rect.height
    },
    //滚动时重新计算top值
    onScroll(){
      this.updateOffsetTop()
    },
    //输入值如果为空，默认当前周
    setDefaultVal() {
      this.monthValue = this.value
      if (!this.value || this.value.length < 2) {
        let now = new Date()
        this.monthValue = [now.getFullYear(), now.getMonth() + 1]
      }
      this.selYear = this.monthValue[0]
    },
    //上一个月，下一个月
    prevOrNextMonthChange(step) {
      let year = this.monthValue[0]
      let month = this.monthValue[1]
      let tem = month + step
      if (tem < 1) {
        month = 12
        year--
      } else if (tem > 12) {
        month = 1
        year++
      } else {
        month = tem
      }
      if(!this.checkMonthEnable([year, month],true)){
        return false
      }
      this.selYear = year
      this.monthValue = [year, month]
      this.showDropList = false
      this.emitChange()
    },
    //年切换
    yearChangeHandler(step) {
      if(!this.checkYearEnable(this.selYear + step)){
        return
      }
      this.selYear += step
    },
    //月切换
    monthChangeHandler(item, index) {
      if(!this.checkMonthEnable([this.selYear, index + 1],true)){
        return false
      }
      this.monthValue = [this.selYear, index + 1]
      this.showDropList = false
      this.emitChange()
    },
    //触发change
    emitChange(){
      let month2 = DateUtil.isLeapYear(this.selYear) ? 29 : 28 //2月平年28天，闰年29天
      let lastDayArr = [31, month2, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      let dateRange = {
        startDate:this.monthValue[0]+'/'+this.monthValue[1]+'/1',
        endDate:this.monthValue[0]+'/'+this.monthValue[1]+'/'+lastDayArr[this.monthValue[1]-1]
      }
      this.$emit('change', this.monthValue, dateRange)
    },
    //检查年是否超过限制
    checkYearEnable(year) {
      if (this.maxMonth.length > 1) {
        if(year > this.maxMonth[0]){
          if(this.maxMsg) this.$toast(this.maxMsg)
          return false
        }
      }
      if (this.maxMonth.length > 1) {
        if(year < this.minMonth[0]){
          if(this.minMsg) this.$toast(this.minMsg)
          return false
        }
      }
      return true
    },
    //检查月是否超过限制
    checkMonthEnable(monthVal,showMsg) {
      let year = monthVal[0]
      let month = monthVal[1]
      month = month<10 ? '0'+month : month
      let curStr = year+''+month
      if (this.maxMonth.length > 1) {
        let maxYear = this.maxMonth[0]
        let maxMonth = this.maxMonth[1]
        maxMonth = maxMonth < 10 ? '0'+maxMonth : maxMonth
        let maxStr = maxYear+''+maxMonth
        if(+curStr > +maxStr){
          if(this.maxMsg && showMsg) this.$toast(this.maxMsg)
          return false
        }
      }
      
      if (this.minMonth.length > 1) {
        let minYear = this.minMonth[0]
        let minMonth = this.minMonth[1]
        minMonth = minMonth<10 ? '0'+minMonth : minMonth
        let minStr = minYear+''+minMonth
        if(+curStr < +minStr){
          if(this.minMsg && showMsg) this.$toast(this.minMsg)
          return false
        }
      }
      return true
    },
  }
}
</script>

<style scoped lang="less">
//引入mixin和var
@import '../../../css/mixin.less';
.v-month-picker {
  height: 44px;
  padding-left: 15px;
  padding-right: 15px;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #fff;
  &-droplist {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    position: fixed;
    z-index: 2;
    &-header {
      background-color: #fff;
      position: relative;
      height: 50px;
      display: flex;
      font-size: 13px;
      background-color: #f7f7f7;
      justify-content: center;
      align-items: center;
      .hairline(bottom, #eee);
    }
    &-yearhandler {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
    }
    &-content {
      background-color: #fff;
      padding-bottom: 15px;
      padding-top: 15px;
    }
  }
  &-header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &__label {
      font-size: 14px;
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      &:active {
        opacity: 0.8;
      }
    }
    &__prev {
      transform: rotate(180deg);
    }
    &__prev,
    &__next {
      display: flex;
      width: 44px;
      height: 44px;
      justify-content: center;
      align-items: center;
      color: #999;
      font-size: 16px;
      &.disabled {
        opacity: 0.3;
      }
      &:active {
        background-color: #fafafa;
      }
    }
  }
}
.v-month-list {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 25%;
    display: flex;
    justify-content: center;
    margin: 7px 0;
    font-size: 14px;
    &.disabled{
      opacity: 0.4;
      &.active {
        font-weight: bold;
        span {
          background-color: #fff;
          color: #333;
        }
      }
    }
    &.active {
      span {
        background-color: @color-primary;
        color: #fff;
      }
    }
    span {
      display: flex;
      width: 60px;
      height: 40px;
      border-radius: 44px;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
